<template>
    <div>
        <h1>分数1</h1>
        <div>
<!--            realNum1:{{realNum1}} realNum2:{{realNum2}}-->
            <el-form label-width="80px" >
                <el-form-item label="分数：">
                    <p><el-input v-model="formData.num1" style="width: 100px;"></el-input>&nbsp;
                        <span class="frac"><sup>
                            <el-input v-model="formData.num2" style="width: 100px;margin-bottom: 5px;"></el-input>
                        </sup><span>&frasl;</span><sub>
                            <el-input v-model="formData.num3" style="width: 100px;margin-top: 5px;"></el-input>
                        </sub></span></p>
                </el-form-item>

                <el-form-item label-width="0" align="center">
                    <el-button type="primary" @click="draw">画图</el-button>
                </el-form-item>
                <div v-if="calced">
                    <el-form-item label="预览：">
                        <p style="font-size: 20px;"><span v-if="realNum1">{{realNum1}}&nbsp;</span><span class="frac"><sup>{{realNum2}}</sup><span>&frasl;</span><sub>{{formData.num3}}</sub></span></p>
                    </el-form-item>
                    <el-form-item label-width="0">
                        <el-row>
                            <el-col :xs="24" :sm="12" :lg="8" v-for="index in realNum1" :key="index" >
                                <fenshuChart :num1="formData.num3" :num2="formData.num3" :key="index"></fenshuChart>
                            </el-col>
                            <el-col v-if="realNum2" :xs="24" :sm="12" :lg="8" >
                                <fenshuChart :num1="realNum2" :num2="formData.num3"></fenshuChart>
                            </el-col>
                        </el-row>
                    </el-form-item>
                </div>

            </el-form>
        </div>

    </div>
</template>

<script>
    import fenshuChart from './fenshu-chart'
    export default {
        name: "cake1",
        components: {fenshuChart},
        data() {
            return {
                fractionCacheKey: 'fractionCacheKey1',
                formData: {
                    num1: 3,
                    num2: 4,
                    num3: 5,
                },

                realNum1: 0,
                realNum2: 0,

                calced: false,
            }
        },
        methods: {
            draw() {
                this.$localStorage.set(this.fractionCacheKey, this.formData, 4 * 60 * 60 * 1000)

                let num1 = this.formData.num1
                if (!num1) {
                    num1 = 0
                }
                let numerator = parseInt(num1) * parseInt(this.formData.num3) + parseInt(this.formData.num2)
                let denominator = parseInt(this.formData.num3)
                this.realNum1 = parseInt(numerator / denominator)
                this.realNum2 = parseInt(numerator % denominator)
                this.calced = true
            }
        },
        computed: {
            paramObj() {
                return {
                    num1: this.formData.num1,
                    num2: this.formData.num2,
                    num3: this.formData.num3,
                }
            }
        },
        watch: {
            paramObj: {
                immediate: true,
                deep: true,
                handler() {
                    this.calced = false
                }
            },
        },
        mounted() {
            let formData = this.$localStorage.get(this.fractionCacheKey)
            console.log('formData:', formData)
            if (formData) {
                this.formData = formData
            }
        }
    }
</script>

<style scoped>
    span.frac {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
    span.frac > sup, span.frac > sub {
        display: block;
        font: inherit;
        padding: 0 0.3em;
    }
    span.frac > sup {border-bottom: 0.08em solid;}
    span.frac > span {display: none;}
</style>
